import { Cascader, Form, InputNumber, Radio, Select, Space } from "antd"
import { useRequest } from "ahooks"
import { LogisticsType } from "@/constants/enums/goods"
import { queryLogisticsTemplate } from "@/services/logisticsTemplate"
import { history } from '@umijs/max'
import { queryCityOptions } from "@/services/common";

type LogisticsFormItemValue = {
  logisticsType: LogisticsType
  logisticsPrice?: number | null
  logisticsId?: number
}

export const Validator = (value: LogisticsFormItemValue) => {
  if (value.logisticsType === LogisticsType.统一邮费 && (value.logisticsPrice === null || value.logisticsPrice === undefined)) {
    return Promise.reject(new Error('请设置统一邮费价格'))
  }
  if (value.logisticsType === LogisticsType.物流模版 && !value.logisticsId) {
    return Promise.reject(new Error('请选择运费模板'))
  }
  return Promise.resolve()
}

const LogisticsFormItem: React.FC<{
  value?: LogisticsFormItemValue,
  onChange?: (value: LogisticsFormItemValue) => void
}> = props => {
  const template = useRequest(() => queryLogisticsTemplate({pageNum: 1, pageSize: 100}))

  const onTypeChange = (value: LogisticsType) => {
    props.onChange?.({
      ...props.value!,
      logisticsType: value,
    })
  }
  const onPriceChange = (value: number | null) => {
    props.onChange?.({
      ...props.value!,
      logisticsPrice: value,
    })
  }
  const onTemplateChange = (value: number) => {
    props.onChange?.({
      ...props.value!,
      logisticsId: value,
    })
  }
  const addTemplate = () => {
    sessionStorage.setItem('__/mall/logistics/template/edit_title', '新建物流模板')
    history.push('/mall/logistics/template/edit')
  }

  return (
    <div>
      <div className="flex items-center">
        <Radio checked={props.value?.logisticsType === LogisticsType.统一邮费} onChange={() => onTypeChange(LogisticsType.统一邮费)}>统一邮费</Radio>
        <InputNumber
          addonBefore='¥'
          disabled={props.value?.logisticsType !== LogisticsType.统一邮费}
          style={{width: 320}}
          value={props.value?.logisticsPrice}
          onChange={onPriceChange}
          min={0}
          precision={2}
          controls={false}
        />
      </div>
      <div className="flex items-center mt-6">
        <Radio checked={props.value?.logisticsType === LogisticsType.物流模版} onChange={() => onTypeChange(LogisticsType.物流模版)}>运费模版</Radio>
        <Space>
          <Select
            placeholder='请选择运费模板'
            disabled={props.value?.logisticsType !== LogisticsType.物流模版}
            style={{width: 320}}
            value={props.value?.logisticsId}
            onChange={onTemplateChange}
            loading={template.loading}
            options={template.data?.data.map(it => ({label: it.tplName, value: it.templateId}))}
          />
          <a onClick={addTemplate}>新建</a>
          <a>|</a>
          <a onClick={template.refresh}>刷新</a>
        </Space>
      </div>
    </div>
  )
}

const LogisticsInfo: React.FC = () => {
  const cityOptions = useRequest(queryCityOptions)

  return (
    <>
      <Form.Item label='快递运费' name='logisticsInfo' rules={[{required: true, message: '请完善快递运费'}, {validator: (_, val) => Validator(val)}]}>
        <LogisticsFormItem />
      </Form.Item>
      <Form.Item label='发货地' name='deliver' rules={[{required: true, message: '请选择发货地'}]}>
        <Cascader options={cityOptions.data?.data} placeholder="请选择" style={{width: 320}} />
      </Form.Item>
    </>
  )
}

export default LogisticsInfo
